//负责渲染与更新
//通过标识上的mark标识找到相应的节点进行页面内容替换
import {
  bindEvent
} from "./compiler/event";
import {
  eventFormat,
  stateFormat
} from "./index";


export function useDOM({
  template,
  state,
  methods
}, rootDOM) {
  //渲染形成DOM树
  rootDOM.innerHTML = render(template, state);
  //绑定事件
  bindEvent(methods);
}

/**
 * 初始化render
 * @param {*} template 来自App初始的模板
 * @param {*} state 来自App初始化的state对象
 * @returns 处理好格式的模板
 */
export function render(template, state) {
  //处理事件格式
  template = eventFormat(template);
  //处理数据状态格式
  template = stateFormat(template, state);

  return template;
}

/**
 * 更新statePool数据然后可以渲染页面
 * @param {*} statePool 响应式的数据数组
 * @param {*} key 键名 count name 
 * @param {*} value 键值 2/1/大田
 */
export function update(statePool, key, value) {
  //获取所有的元素
  const allElements = document.querySelectorAll('*');
  let oItem = null;

  statePool.forEach(item => {
    /**
     * statePool:
     * [
     *   {mark: 1628091740739, state: ["count"]}, 
     *   {mark: 1628091737697, state: ["name"]}
     * ]
     */

    //键名相同时更改最后一个
    if (item.state[item.state.length - 1] === key) {
      for (let i = 0; i < allElements.length; i++) {
        oItem = allElements[i];

        //拿到标签data-mark属性值 并整形
        const _mark = parseInt(oItem.dataset.mark);
        //如果相等
        if (item.mark === _mark) {
          //console.log(oItem);
          //<h1 data-mark="1628092920113">0</h1>
          //<h2 data-mark="1628092919248">datian</h2>
          oItem.innerHTML = value;
          //<h1 data-mark="1628092920113">2</h1>
          //<h2 data-mark="1628092919248">大田</h2>
        }
      }
    }
  })
}